<template>
  <el-card class="box-card">
    <el-button type="primary" @click="addRole">添加角色</el-button>
    <AddRole ref="addroles" @getAddConfirm="getAddConfirm"></AddRole>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="#" width="50" />
      <el-table-column prop="roleName" label="角色名称" width="261" />
      <el-table-column prop="roleDesc" label="角色描述" width="270" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
          >
            <el-icon>
              <Edit />
            </el-icon>
            编辑
          </el-button>
          <EditRole ref="edit" @getEdit="handleEdit"></EditRole>

          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            <el-icon>
              <Delete />
            </el-icon>
            删除
          </el-button>
          <DeleteDialog ref="del" @getDelete="getDelete"></DeleteDialog>

          <el-button size="small" type="warning">
            <el-icon>
              <Setting />
            </el-icon>
            分配权限
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts" setup>
import { getRoleList, addRoleList } from "@/api/role";
import { ref, reactive, nextTick } from "vue";
import AddRole from "./component/AddRole.vue";
import EditRole from "./component/EditRole.vue";
import DeleteDialog from "./component/DeleteDialog.vue";

interface User {
  roleName: string;
  roleDesc: string;
}

const addroles = ref();
const edit = ref();
const del = ref();

const tableData: any = reactive([]);

// 接口
const getRole = async () => {
  let res = await getRoleList();
  console.log(res.data.data);
  tableData.push(...res.data.data);
  console.log(tableData, "权限信息");
};

getRole();

// 添加角色
const addRole = () => {
  console.log(addroles.value);
  addroles.value.addDialog();
};

// 确认添加
const getAddConfirm = (role: { roleName: string; roleDesc: string }) => {
  console.log(role);
  const { roleName, roleDesc } = role;

  addRoleList({ roleName, roleDesc });

  tableData.push({
    roleName,
    roleDesc,
  });
};

// 编辑
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
  edit.value.editDialog();
};

// 删除
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
  del.value.deleteDialog(index);
};

const getDelete = (index: number) => {
  console.log(index, "删除index");
  tableData.splice(index, 1);
};
</script>

<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
  height: auto;
}

.el-table {
  margin-top: 20px;
}

.el-button {
  margin: 0 5px;
}
</style>
